<template>
    <div class="divBox">
      <el-dialog v-if="modals" :visible.sync="modals" title="选择链接" width="900px" :before-close="cancel">
			<div class="table_box">
				<div class="left_box">
					<el-tree 
						:data="categoryData" 
						default-expand-all 
						node-key="id"
						:highlight-current="true" 
						:expand-on-click-node="false"
						:current-node-key="treeId"
						@node-click="handleCheckChange">
					</el-tree>
				</div>
				<div class="right_box" v-if="currenType=='link'">
					<div v-for="(item,index) in currentList" :key="index">
						<div class="cont">{{item.name}}</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==itemn.id?'on':''" v-for="(itemn,indexn) in item.pageLink" :key="indexn" @click="getUrl(itemn)">{{itemn.name}}</div>
						</div>
					</div>
				</div>
				<div class="right_box" v-if="currenType=='special' || currenType=='product_category' || currenType=='product' || currenType=='seckill' ||currenType=='presell' || currenType == 'bargain' || currenType == 'combination' || currenType == 'active'">
					<el-form
						ref="formValidate"
						:model="formValidate"
						class="tabform"
						v-if="currenType=='product'"
					>
						<el-row type="flex">
							<el-col>
								<el-form-item label="商品分类：" label-for="pid">
									<el-cascader
										v-model="formValidate.cate_id"
										class="selWidth"
										:options="merCateList"
										:props="props"
										clearable
										@change="userSearchs()"
									/>  
								</el-form-item>
							</el-col>
							<el-col>
								<el-form-item label="搜索：" label-for="store_name">
									<el-input class="selWidth" placeholder="请输入商品名称,关键字,编号" v-model="formValidate.store_name"  @keyup.enter.native="userSearchs"/>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<el-table
						ref="table"
						size="mini"
						:data="tableList"
						v-loading="loading"
						row-key="id"
						:default-expand-all="false"
						:tree-props="{children: 'children', hasChildren: 'hasChildren'}"				
					>
						<el-table-column key="1" label="选择" min-width="60">
							<template scope="scope">
								<el-radio v-model="radio" :label="scope.$index"  @change.native="getCurrentRow(scope.row)" />
							</template>
						</el-table-column>
						<el-table-column key="2" prop="id" label="ID" min-width="60">
						<template slot-scope="scope">
							<span>{{scope.row.id || scope.row.product_id || scope.row.store_category_id }}</span>
						</template>
						</el-table-column>
						<el-table-column v-if="currenType=='special'" key="3"  prop="name" label="页面名称" min-width="60" />
						<el-table-column v-if="currenType=='special'" key="4"  prop="url" label="页面链接" min-width="150" />
						<el-table-column v-if="currenType=='product_category'" key="5"  prop="cate_name" label="分类名称" min-width="60" />
						<el-table-column v-if="currenType=='product_category'" key="6" label="分类图标" min-width="150">
							<template slot-scope="scope">
								<div class="demo-image__preview">
									<el-image style="width: 36px; height: 36px" :src="scope.row.pic" :preview-src-list="[scope.row.pic]" />
								</div>
						</template>
						</el-table-column>
						<el-table-column v-if="currenType=='bargain'||currenType=='combination'||currenType=='presell'||currenType=='seckill'||currenType=='product'" key="7" label="商品图片" min-width="80">
							<template slot-scope="scope">
								<div class="demo-image__preview">
									<el-image style="width: 36px; height: 36px" :src="scope.row.image" :preview-src-list="[scope.row.image]" />
								</div>
							</template>
						</el-table-column>
						<el-table-column v-if="currenType=='bargain'||currenType=='combination'||currenType=='presell'||currenType=='seckill'||currenType=='product'" key="8"  prop="store_name" label="商品名称" min-width="150" />

						<el-table-column v-if="currenType=='active'" key="10" label="专场图片" min-width="80">
							<template slot-scope="scope">
								<div class="demo-image__preview">
									<el-image style="width: 36px; height: 36px" :src="scope.row.value.image" :preview-src-list="[scope.row.value.image]" />
								</div>
							</template>
						</el-table-column>
						<el-table-column v-if="currenType=='active'" key="11"  prop="value.name" label="专场名称" min-width="150" />
					</el-table>
					<div class="block" v-if="currenType=='product'||currenType=='seckill'||currenType=='presell'||currenType == 'bargain'||currenType == 'combination'||currenType == 'active'">
						<el-pagination
						:page-size="formValidate.limit"
						:current-page="formValidate.page"
						layout="prev, pager, next, jumper"
						:total="total"
						@size-change="handleSizeChange"
						@current-change="pageChange"
						/>
        </div>
				</div>
				<div class="right_box" v-if="currenType=='custom'">
					<div style="width: 360px;margin: 150px 100px 0 120px">
						<el-form ref="customdate" size="small" :model="customdate" :rules="ruleValidate" label-width="120px">	
							<el-form-item label-width="0">
								<el-radio-group
									v-model="customdate.status"
								>
									<el-radio :label="1" class="radio">普通链接</el-radio>
									<el-radio :label="2">跳转其他小程序</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item v-if="customdate.status == 1" label="跳转路径：" prop="url">
								<el-input v-model="customdate.url" size="small" placeholder="请输入正确跳转路径"></el-input>
							</el-form-item>
							<div v-if="customdate.status == 2">
								<el-form-item label="APPID：" prop="appid">
									<el-input v-model="customdate.appid" size="small" placeholder="请输入正确APPID"></el-input>
								</el-form-item>
								<el-form-item label="小程序路径：" prop="mpUrl">
									<el-input v-model="customdate.mpUrl" size="small" placeholder="请输入正确小程序路径"></el-input>
								</el-form-item>
								<el-form-item label-width="0">
									<div>路径示例：merchant/devise/diy/index?id=184</div>
								</el-form-item>
								<div style="color:#ff4949;">小程序跳转外链链接，域名需在白名单范围内的合法域名</div>
							</div>
						</el-form>
					</div>	
				</div>
			</div>
			<div slot="footer">
				<el-button @click="cancel" size="small">取消</el-button>
				<el-button type="primary" @click="handleSubmit('customdate')" v-if="currenType=='custom'" size="small">确定</el-button>
				<el-button type="primary" @click="ok" v-else size="small">确定</el-button>
			</div>
        </el-dialog>
    </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { pageCategory, pageLink, getProduct } from "@/api/diy";
import { categoryListApi } from "@/api/product";
export default {
	name: 'linkaddress',
	data () {
		return {
			modals: false,
			categoryData:[],
			currenType:'link',
			radio: '',
			props: {
				emitPath: false
			},
			merCateList: [],
			formValidate: {
				page: 1,
				limit: 15,
				cate_id: "",
				store_name: ""
			},
			total: 0,
			currentList:[],
			currenId:'',
			currenUrl:'',
			treeId: 0,
			loading:false,
			tableList:[],
			presentId:0,
			categoryId:'',//左侧分类id
			customdate: {
				name:'',
				mpUrl:'',
				url: '',					
				status: 1
			},
			customNum:1,
			ruleValidate:{
				name: [{ required: true, message: '请输入链接名称', trigger: 'blur' }],
				mpUrl: [{ required: true, message: '请输入跳转路径', trigger: 'blur' }],
				appid: [{ required: true, message: '请输入APPID', trigger: 'blur' }]
			}
		}
	},
	computed: {},
	created(){
		this.getSort();
		this.goodsCategory();
	},
	mounted(){},
	methods: {
		init() {},
		getCurrentRow(row) { // 获取选中数据
			row.checked = true
			this.presentId = row.id;
			this.currenUrl = row.url;
			},
		getCustomList(){
			pageLink(this.categoryId).then(res=>{
				if(!res.data.list.length){
					this.customNum = 2
				}
				this.tableList = res.data.list
			}).catch(err=>{
				this.$message.error(err.message)
			})
		},
		handleSubmit (name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					let url = this.customdate.url;
					if (this.customdate.status == 1) {
						url = this.customdate.url;
					} else {
						url = this.customdate.mpUrl + '@APPID=' + this.customdate.appid;
					}
					this.$emit('linkUrl', url);
					this.modals = false;
					// this.reset();
				} else {
					this.$message.error('请填写信息');
				}
			})
		},
		pageChange(index) {
			this.formValidate.page = index;
			this.getList();
		},
		handleSizeChange(val) {
			this.formValidate.limit = val
			this.getList()
		},
		// 商品分类；
		goodsCategory() {
			categoryListApi()
				.then((res) => {
					this.merCateList = res.data;
				})
				.catch((res) => {
					this.$message.error(res.message);
				});
		},
		// 表格搜索
		userSearchs() {
			this.formValidate.page = 1;
			this.getList();
		},
		reset(){
			this.currenUrl = "";
			this.presentId = 0;
			this.currenId = "";
			this.radio = "";
			this.tableList = [];
			this.customdate.status == 1;
			this.customdate.url="";
			this.customdate.mpUrl="";
		},
		getUrl(item){
			this.currenId = item.id;
			this.currenUrl = item.url;
		},
		getSort(){
			pageCategory().then(res=>{
				if(res.data.length>0){
					if(res.data[0].children[0]){
						res.data[0].children[0].selected = true;
						this.handleCheckChange(res.data[0].children[0]);
						this.treeId = res.data[0]['children'][0]['id']
					}else{
						this.handleCheckChange(res.data[0]);
						this.treeId = res.data[0]&&res.data[0]['id']
					}
					this.categoryData = res.data;
				}
			}).catch(err=>{
				this.$message.error(err.message)
			})
		},
		getList(){
			this.loading = true;
			if(this.currenType == 'product'){
				let formValidate = this.formValidate
				formValidate.product_type = 0;
				getProduct(formValidate)
					.then(async (res) => {
						let data = res.data;
						data.list.forEach((e)=>{
							e.url = `/pages/goods_details/index?id=${e.product_id}`
						});
						this.tableList = data.list;
						this.total = res.data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$message.error(res.message);
					});
			}else if(this.currenType == 'seckill'){
				let formValidate = this.formValidate
				formValidate.product_type = 1;
				getProduct(formValidate)
					.then(async (res) => {
						let data = res.data;
						data.list.forEach((e)=>{
							e.url = `/pages/activity/goods_seckill_details/index?id=${e.product_id}`
						});
						this.tableList = data.list;
						this.total = res.data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$message.error(res.message);
					});
			}else if(this.currenType == 'bargain'){
				let formValidate = this.formValidate
				formValidate.product_type = 3;
				getProduct(formValidate)
					.then(async (res) => {
						let data = res.data;
						data.list.forEach((e)=>{
							e.url = `/pages/activity/assist_detail/index?id=${e.activity_id}`
						});
						this.tableList = data.list;
						this.total = res.data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$message.error(res.message);
					});
			}else if(this.currenType == 'combination'){
				let formValidate = this.formValidate
				formValidate.product_type = 4;
				getProduct(formValidate)
					.then(async (res) => {
						let data = res.data;
						data.list.forEach((e)=>{
							e.url = `/pages/activity/combination_details/index?id=${e.activity_id}`
						});
						this.tableList = data.list;
						this.total = res.data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$message.error(res.message);
					});
			}else if(this.currenType == 'presell'){
				let formValidate = this.formValidate
				formValidate.product_type = 2;
				getProduct(formValidate)
					.then(async (res) => {
						let data = res.data;
						data.list.forEach((e)=>{
							e.url = `/pages/activity/presell_details/index?id=${e.activity_id}`
						});
						this.tableList = data.list;
						this.total = res.data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$message.error(res.message);
					});
			} else {
				pageLink(id, {
					page: this.formValidate.page,
					limit: this.formValidate.limit
				}).then(res=>{
					this.loading = false
					let data = res.data;
					this.currentList = data;
					if(this.currenType == 'special'){
						let list = []
						data.forEach((e)=>{
							e.url = `/pages/index/index?id=${e.id}`
							if(e.is_diy){
								list.push(e)
							}
						});
						this.tableList = list
					}else if(this.currenType == 'product_category'){
						data.forEach((e)=>{
							if(e.hasOwnProperty('children')){
								e.children.forEach((j)=>{
									j.id = j.store_category_id
									j.url = `/pages/store/list/index?id=${j.store_category_id}&title=${j.cate_name}`
									if(j.hasOwnProperty('children')){
										j.children.forEach((h)=>{
											h.url = `/pages/store/list/index?id=${h.store_category_id}&title=${h.cate_name}`
										})
									}
								})
							}
							e.id = e.store_category_id
							e.url = `/pages/store/list/index?id=${e.store_category_id}&title=默认`
						});
						this.tableList = data
						this.total = data.length
					} else if (this.currenType == 'active') {
						data.list.forEach(item => {
							item.id = item.group_data_id
							item.url = `/pages/activity/topic_detail/index?id=${item.group_data_id}`
						})
						this.tableList = data.list
						this.total = res.data.count
					}
				}).catch(err=>{
					this.loading = false
					this.$message.error(err.message)
				});
			}
		},
		handleCheckChange(data){
			this.reset();
			let id = ''
			this.currenType = data.type
			if(data.pid){
				id = data.id
				this.categoryId = data.id
			}else {
				return false
			}
			this.loading = true	
			this.formValidate.page = 1
			if(this.currenType == 'product' || this.currenType == 'seckill' || this.currenType == 'presell' || this.currenType == 'bargain' || this.currenType == 'combination'){
				this.getList();
			} else if(this.currenType=='custom'){
				this.getCustomList();
			}else {
				let obj = {};
				if (this.currenType == 'active') {
					obj.page = this.formValidate.page;
					obj.limit = this.formValidate.limit;
				}
				pageLink(id, obj).then(res=>{
					this.loading = false
					let data = res.data;
					this.currentList = data;
					if(this.currenType == 'special'){
						let list = []
						data.list.forEach((e)=>{
							e.url = `/pages/index/index?id=${e.id}`
							if(e.is_diy){
								list.push(e)
							}
						});
						this.tableList = list
					}else if(this.currenType == 'product_category'){
						data.forEach((e)=>{
							if(e.hasOwnProperty('children')){
								e.children.forEach((j)=>{
									j.id = j.store_category_id
									j.url = `/pages/store/list/index?id=${j.store_category_id}&title=${j.cate_name}`
									if(j.hasOwnProperty('children')){
										j.children.forEach((h)=>{
											h.url = `/pages/store/list/index?id=${h.store_category_id}&title=${h.cate_name}`
										})
									}
								})
							}
							e.id = e.store_category_id
							e.url = `/pages/store/list/index?id=${e.store_category_id}&title=默认`
						});
						this.tableList = data
						this.total = data.length
					} else if (this.currenType == 'active') {
						data.list.forEach(item => {
							item.id = item.group_data_id
							item.url = `/pages/activity/topic_detail/index?id=${item.group_data_id}`
						})
						this.tableList = data.list
						this.total = res.data.count
					}
				}).catch(err=>{
					this.loading = false
					this.$message.error(err.message)
				});
			}
		},
		ok(){
			if(this.currenUrl==""){
				return this.$message.warning("请选择链接");
			}else {
				this.$emit("linkUrl",this.currenUrl);
				this.modals = false
				this.reset();
			}
		},
		cancel(){
			this.modals = false
			this.reset();
		}
	}
}
</script>

<style scoped lang="scss">
	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;
		img {
			width: 100%;
			height: 100%;
		}
	}
	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb{
		-webkit-box-shadow: inset 0 0 6px #ddd;
	}
	::-webkit-scrollbar {
		width: 4px!important; /*对垂直流动条有效*/
	}
.on{
	background-color: var(--prev-color-primary)!important;
	color: #fff!important;
}
.table_box{
	margin-top: 14px;
	display: flex;
	position: relative;
	.left_box{
		width: 171px;
		height: 470px;
		border-right: 1px solid #EEEEEE;
		overflow-x: hidden;
		overflow-y: auto;
		.left_cont{
			margin-bottom: 12px;
			cursor: pointer;
		}
	}
	.right_box{
		margin-left: 23px;
		font-size: 13px;
		font-family: PingFang SC;
		width: 645px;
		height: 470px;
		overflow-x: hidden;
		overflow-y: auto;
		.cont{
			font-weight: 500;
			color: #000000;
			font-weight: bold;
		}
		.Box{
			margin-top: 19px;
			display: flex;
			flex-wrap: wrap;
			.cont_box{
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
				background: #FAFAFA;
				border-radius: 3px;
				text-align: center;
				padding: 7px 30px;
				margin-right: 10px;
				margin-bottom: 18px;
				cursor: pointer;
				&:hover{
					background-color: #eee;
					color: #333;
				}
			}
			.item{
				position: relative;
				.iconfont{
					display: none;
				}
				&:hover{
					.iconfont{
						display: block;
					}
				}
			}
			.iconfont{
				position: absolute;
				right: 9px;
				top:-8px;
				font-size: 18px;
				color: #333;
			}
		}
		
	}
}
::v-deep .el-tree-node__label{
	font-size: 12px;
}
::v-deep .el-table--mini .el-table__cell{
	padding: 10px 5px;
}
</style>
